<template>
	<div>
		<el-row :gutter="20">

			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>短信管理</span>
						</div>
					</template>
					<el-form ref="formRef" :rules="rules" :model="form" label-width="160px">
                       
                
						<el-form-item label="短信宝账号：">
							<el-input v-model="form.zh"></el-input>
						</el-form-item>
                        <el-form-item label="密　码：">
							<el-input v-model="form.mm"></el-input>
						</el-form-item>
                        <el-form-item label="短信签名：">
							<el-input v-model="form.qm"></el-input>
						</el-form-item>
                        <el-form-item label="短信费用（元/条）：">
							<el-input v-model="form.fy"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit(formRef)">保存配置</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
		
	</div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref } from 'vue';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import {xtsmsdata} from '../../api/index';

const name = localStorage.getItem('ms_username');
const rules: FormRules = {
    fjr: [{ required: true, message: '请输入发件人', trigger: 'blur' }],
};
const formRef = ref<FormInstance>();
var form = reactive({
	qm: '',
	fy: '',
	zh: '',
    mm: '',
});
 // reactive 数据双向绑定；让我们的复杂类型数据变成响应式数据；不需要.value来获取

    //获取初始数据
    onMounted( () => {
        getAllListLink();
    });
        //获取表格列表数据
    const getAllListLink = () => {
        let params = {
			action:'apiindex',
        }  
         console.log(form);
         xtsmsdata(params).then(res => {
			    if (res.status == 200) {
                    form.qm=res.data.data.qm;
                    form.fy=res.data.data.fy;
                    form.zh=res.data.data.zh;
                    form.mm=res.data.data.mm;
                } else if (res.status !== 200) {
                    ElMessage({
                        showClose: true,
                        message: res.data.msg,
                        type: 'error',
                    })
                }
            })
    };
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
    // 表单校验
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log(form);
            addRoles();
            // ElMessage.success('提交成功！');
        } else {
            return false;
        }
    });
};

const addRoles = () => { 
      let params = {
        action: 'apiedit',
        qm: form.qm,
        fy: form.fy,
        zh: form.zh,
        mm: form.mm,
      }
      // 新增
      xtsmsdata(params).then(res => {
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };


</script>

<style scoped>
.info {
	text-align: center;
	padding: 35px 0;
}
.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.info-edit i {
	color: #eee;
	font-size: 25px;
}
.info-image:hover .info-edit {
	opacity: 1;
}
.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #262626;
}
.crop-demo-btn {
	position: relative;
}
.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>
